<template>
  <div id="app">
    <app-start-page v-if="null == serverCurIndex"></app-start-page>
    <el-container v-if="null != serverCurIndex" id="container-main">
      <!-- 设备列表 -->
      <el-aside id="aside-machine" width="auto">
        <menu-servers></menu-servers>
        <div class="panel-tools">
          <dialog-server-edit></dialog-server-edit>
        </div>
      </el-aside>
      
      <!-- 设备菜单 -->
      <menu-system-operation></menu-system-operation>
    
      <!-- 主内容 -->
      <el-container>
        <el-main id="content-main">
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import MenuSystemOperation from './components/MenuSystemOperation.vue'
import DialogServerEdit from './components/DialogServerEdit.vue'
import MenuServers from './components/MenuServers.vue'
import AppStartPage from './components/AppStartPage.vue'
require('./utils/Common.css');
export default {
    components : {
        'menu-servers' : MenuServers,
        'dialog-server-edit' : DialogServerEdit,
        'menu-system-operation' : MenuSystemOperation,
        'app-start-page' : AppStartPage,
    },
    computed : {
        serverCurIndex() {
            return this.$store.getters.serverCurIndex;
        },
    },
    async mounted() {
        await this.$store.dispatch('init');
    },
}
</script>
<style lang="less">
body {margin:0;}
html,body,#app,#container-main,#aside-machine,#menu-machine,
#aside-feature,#menu-feature {height:100%;}
body,#aside-feature,#content-main {text-align: left;}
#aside-machine {position: relative;}
#aside-machine > .panel-tools { position: absolute; bottom: 0px;text-align: center;width: 97%;background: #efefef;;padding: 10px 0;}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
